<template>
	<view class="index">
		<!-- 定位 -->
		<view class="position">
			<view class="position_left">
				<image src="../../static/iconfont/position.png"></image>
				<view class="content">
					学车城市
				</view>
			</view>

			<view class="position_right">
				<view class="content">
					<picker mode="region" @change="changeCity">
						<view>
							<text>{{myregion}}</text>
							<image src="../../static/iconfont/right.webp"></image>
						</view>

					</picker>

				</view>

			</view>

		</view>

		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<block v-for="(k,i) in pic_arr" :key="k.id">
				<swiper-item>
					<image :src="k.pic" class="pic_size"></image>
				</swiper-item>
			</block>
		</swiper>

		<!-- 操作栏operate -->
		<view class="operate">
			<view class="operate_son" v-for="(k,i) in operate_icon" :key="k.id" @click="$win.show(k.url)">
				<image :src="k.pic"></image>
				<text>{{k.name}}</text>
			</view>
		</view>

		<!-- 公告栏announcement -->
		<view class="announcement">
			<image src="../../static/iconfont/announcement.png"></image>
			<swiper :autoplay="true" :interval="3000" :duration="1000" :circular="true" vertical="true">
				<swiper-item v-for="(k,i) in announcement" :key="k.id">
					<view>
						<text class="announcement_type">{{k.announcement_type}}</text>
						<text class="announcement_content">{{k.announcement_content}}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 特价秒杀purchase -->
		<view class="purchase">
			<view class="pintuan">
				<text class="title">拼团</text>
				<navigator url="#">
					<image :src="purchase.pintuan.pic" mode="aspectFit"></image>
				</navigator>
			</view>
			<view class="miaosha">
				<text class="title">秒杀</text>
				<!-- 倒计时 -->
				<uni-countdown :fontSize="9" :show-day="false" :hour="purchase.miaosha.countdown.h"
					:minute="purchase.miaosha.countdown.m" :second="purchase.miaosha.countdown.s" color="#fff"
					background-color="#111" class="countdown"></uni-countdown>
				<navigator url="#">
					<image :src="purchase.miaosha.pic" mode="aspectFit"></image>
				</navigator>
			</view>
		</view>

		<!-- 热门模块 -->
		<view class="hot">
			<view class="title">
				<view class="long"></view>
				<view class="content">热门班型</view>
				<view class="long"></view>
			</view>
			<view class="hot_content">
				<view class="hot_son" v-for="(k,i) in hot" :key="k.id">
					<image :src="k.pic" mode="aspectFit"></image>
					<view class="price">
						<text>{{k.price}}</text>
						<button>立即报名</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 关于乐驾团 -->
		<view class="about">
			<view class="title">
				<view class="long"></view>
				<view class="content">关于乐驾团</view>
				<view class="long"></view>
			</view>
			<navigator :url="about.link">
				<image :src="about.pic" mode="aspectFit"></image>
			</navigator>
		</view>




	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	import QQMapWx from '@/qqmap-wx-jssdk.js'
	const qqmapSdk = new QQMapWx({
		key: 'RBNBZ-5QRKD-ZZD42-PEYZU-25XGV-56BIK' // 在腾讯地图上申请的key
	})
	export default {
		data() {
			return {

				cdn: this.$conf.CDN_HOST,
				// 轮播图数据
				pic_arr: [{
					// pic: '',
						pic: '../../static/images/background/swiper/1.webp',
						id: 1
					},
					{
						// pic: '',
						pic: '../../static/images/background/swiper/2.webp',
						id: 2
					},
					{
						// pic: '',
						pic: '../../static/images/background/swiper/3.webp',
						id: 3
					}
				],
				//定位
				myregion: '选择省市',
				// 功能栏
				operate_icon: [{
						pic: '../../static/images/icon/operate_icon/invite_Icon.png',
						name: '邀请好友',
						url: '/pages/index/operate/invite/invite',
						id: 1
					},
					{
						pic: '../../static/images/icon/operate_icon/coach_Icon.png',
						name: '教练团',
						url: '/pages/index/operate/coach/coach',
						id: 2
					},
					{
						pic: '../../static/images/icon/operate_icon/venue_Icon.png',
						name: '附近场地',
						url: '/pages/index/operate/venue/venue',
						id: 3
					},
					{
						pic: '../../static/images/icon/operate_icon/mockExam_Icon.png',
						name: '模拟考试',
						url: '/pages/index/operate/mockExam/mockExam',
						id: 4
					},
					{
						pic: '../../static/images/icon/operate_icon/bookingPractice_Icon.png',
						name: '预约练车',
						url: '/pages/index/operate/bookingPractice/bookingPractice',
						id: 5
					},
					{
						pic: '../../static/images/icon/operate_icon/guide_Icon.png',
						name: '学车指南',
						url: '/pages/index/operate/guide/guide',
						id: 6
					},
				],
				//公告
				announcement: [{
						announcement_type: '最新公告',
						announcement_content: '乐驾团系统隆重上线！',
						id: 1
					}, {
						announcement_type: '特价秒杀',
						announcement_content: '4999一条龙拿证！',
						id: 2
					},
					{
						announcement_type: '(公告类型)',
						announcement_content: '(公告内容)',
						id: 3
					},

				],
				//秒杀&拼团
				purchase: {
					pintuan: {
						// pic: '',
						pic: '../../static/images/background/purchase/pintuan.webp',
						link: '',
					},
					miaosha: {
						// pic: '',
						pic: '../../static/images/background/purchase/miaosha.webp',
						link: '',
						//倒计时
						countdown: {
							h: '2',
							m: '0',
							s: '0',
						}
					}
				},
				//热门
				hot: [{
					price: '￥9999.00',
					// pic: '',
					pic: '../../static/images/background/course/1.webp',
					link: '',
					id: 1
				}, {
					price: '￥12000.00',
					// pic: '',
					pic: '../../static/images/background/course/2.webp',
					link: '',
					id: 2
				}, {
					price: '￥8999.00',
					// pic: '',
					pic: '../../static/images/background/course/3.webp',
					link: '',
					id: 3
				}],
				//关于乐驾团
				about: {
					// pic: '',
					pic: '../../static/images/background/about/aboutLjt.webp',
					link: '#',

				},


			};
		},
		
		onLoad() {
this.getAuthorize()
this.getLocation()

		},
		
		onShow() {

		},
		methods: {
			// ...mapActions({
			// 	getCourseLabels_fun:'public/getCourseLabels',
			// }),
			//城市切串
			changeCity(e) {
				this.myregion = e.detail.value[1].replace('市', '');
				console.log('成功切换')
			},
			//获取微信定位授权方法
			getAuthorize() {
				uni.authorize({
					scope: 'scope.userLocation',
					success: (res) => {
						this.getLocation()
					},
					fail: (err) => {
						uni.showModal({
							content: '需要授权位置信息',
							confirmText: '确认授权'
						}).then(res => {
							if (res['confirm']) {
								uni.openSetting({
									success: res => {
										if (res.authSetting['scope.userLocation']) {
											uni.showToast({
												title: '授权成功',
												icon: 'none'
											})
										} else {
											uni.showToast({
												title: '授权失败',
												icon: 'none'
											})
										}
										this.getLocation()
									}
								})
							}
							if (res['cancel']) {
								// 取消授权
								this.getLocation()
							}
						})
					}
				})
			},
			//开始获取定位方法
			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						const {
							latitude,
							longitude
						} = res
						qqmapSdk.reverseGeocoder({
							location: latitude ? `${latitude},${longitude }` : '',
							sig: 'gfOfdUfdyWmTa5FMeFl6AXhXKEUSSYVo', // 这个sig就是上面要准备的第二项SK
							success: (val) => {
								console.log('这就是要获取的当前所在城市的相关信息', val)
								this.myregion=val.result.address_component.city.replace('市', '');
							},
							fail: (err) => {
								console.log('获取城市失败')
							}
						})
					},
					fail: (err) => {
						if (err.errMsg === 'getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF' || err
							.errMsg === 'getLocation:fail system permission denied') {
							uni.showModal({
								content: '请开启手机定位服务',
								showCancel: false
							})
						} else if (err.errMsg === 'getLocation:fail:system permission denied') {
							uni.showModal({
								content: '请给微信开启定位权限',
								showCancel: false
							})
						}
					}
				})
			},

		},
		computed: {
			// ...mapState({
			// 	courseList:state =>state.public.courseList,
			// })
		},

		watch: {}
	}
</script>

<style lang="scss">
	//轮播图start
	.pic_size {
		width: 750rpx;
		height: 280rpx;
	}

	swiper {
		width: 750rpx;
		height: 280rpx;
	}

	//轮播图end


	//定位start
	.position {
		display: flex;
		align-items: center;
		height: 80rpx;
		background-color: #fff;
		justify-content: space-between;
		padding: 0 24rpx;
	}

	.position_left {
		display: flex;
		align-items: center;
	}

	.position_left .content {
		margin-left: 10rpx;
	}

	.position_left image {
		width: 26rpx;
		height: 34rpx;
	}

	.position_right {
		display: flex;
		align-items: center;

	}

	.position_right picker view {
		display: flex;
		align-items: center;
	}

	.position_right picker image {
		height: 40rpx;
		width: 40rpx;
	}

	.position_right .content {
		font-size: 28rpx;
		color: #29C563;
	}



	//定位end

	//操作栏start
	.operate {
		display: flex;
		flex-wrap: wrap;
		height: 340rpx;
		width: 750rpx;
		background-color: #fff;
	}

	.operate_son {
		display: flex;
		flex-direction: column;
		margin: 30rpx 77rpx 0;
		width: 96rpx;
		height: 120rpx;
		// background-color: orange;
	}

	.operate_son image {
		margin: 0 8rpx 8rpx;
		width: 80rpx;
		height: 80rpx;
	}

	.operate_son text {
		font-size: 24rpx;
		text-align: center;
	}

	//操作栏end

	// 公告栏start
	.announcement {
		display: flex;
		align-items: center;
		width: 702rpx;
		height: 80rpx;
		background: #f5f5f5;
		border-radius: 16rpx;
		margin: 20rpx 24rpx;
	}

	.announcement swiper {
		margin: 20rpx;
		line-height: 80rpx;
		height: 100%;
		width: 100%;
	}

	.announcement image {
		margin-left: 20rpx;
		width: 33rpx;
		height: 33rpx;
	}

	.announcement swiper text {
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Medium;
		font-weight: 500;
		text-align: left;
	}

	.announcement .announcement_type {}

	.announcement .announcement_content {
		padding: 10rpx;
	}

	//公告栏end

	// 拼团&秒杀start
	.purchase {
		display: flex;
		justify-content: space-between;
		margin: 0 24rpx 32rpx;
		// background-color: pink;
	}

	.purchase .pintuan,
	.miaosha {
		position: relative;
		width: 340rpx;
		height: 250rpx;
		background: #f5f5f5;
		border-radius: 16rpx;
	}


	.purchase .pintuan .title,
	.miaosha .title {
		position: absolute;
		top: 31rpx;
		left: 24rpx;
		width: 56rpx;
		height: 28rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Bold;
		font-weight: 700;
		text-align: left;
		color: #111111;
		line-height: 20rpx;
	}

	.purchase .miaosha .countdown {
		position: absolute;
		right: 136rpx;
		top: 31rpx;

	}

	.purchase .pintuan image,
	.miaosha image {
		position: absolute;
		bottom: 24rpx;
		left: 24rpx;
		width: 292rpx;
		height: 146rpx;

	}


	// 拼团&秒杀end


	//热门start
	.hot {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 702rpx;
		margin: 0 24rpx 8rpx;
		// background-color: pink;

	}

	.hot .title {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.hot .title .content {
		margin: 40rpx 20rpx;
		width: 128rpx;
		height: 32rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Bold;
		font-weight: 700;
		text-align: center;
		color: #fc6624;
		line-height: 32rpx;
	}


	.hot .title .long {
		width: 125rpx;
		height: 4rpx;
		background: #c7c7c7;
	}

	.hot .hot_content .hot_son {
		position: relative;
		width: 702rpx;
		height: 365rpx;
		// background-color: yellowgreen;
		border-radius: 16px;
		margin-bottom: 40rpx;
	}

	.hot .hot_content .hot_son image {
		width: 100%;
		height: 100%;
		z-index: -1;
		background-color: lightgreen;
		border-radius: 16px;
	}

	.hot .hot_content .hot_son .price {
		position: absolute;
		background-color: #f4f5f7;
		width: 100%;
		height: 80rpx;
		bottom: 0rpx;
	}

	.hot .hot_content .hot_son .price text {
		position: absolute;
		top: 22rpx;
		left: 19rpx;
		font-size: 36rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Bold;
		font-weight: 700;
		text-align: left;
		color: #f93030;
		// background-color: skyblue;
	}

	.hot .hot_content .hot_son .price button {
		position: absolute;
		right: 28rpx;
		bottom: 10rpx;
		width: 184rpx;
		height: 60rpx;
		background: linear-gradient(134deg, #54d685, #29c563 99%);
		border-radius: 30rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		color: #fff;
	}

	//热门end


	//关于start
	.about {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 702rpx;
		margin: 0 24rpx;
		padding-bottom: 50rpx;
	}

	.about .title {
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.about .title .content {
		margin: 40rpx 20rpx;
		width: 160rpx;
		height: 32rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Bold;
		font-weight: 700;
		text-align: center;
		color: #111111;
		line-height: 32rpx;
	}

	.about .title .long {
		width: 125rpx;
		height: 4rpx;
		background: #c7c7c7;
	}

	.about image {
		width: 702rpx;
		height: 250rpx;
	}


	//关于end
</style>
